<template>
  <div style="background-color: #ffffff;">
    <el-row type="flex" justify="center" class="min-app">
      <el-col :span="4" style="background-color: #ffffff; padding: 10px">
        <el-form :inline="true" :model="formInline" size="small">
          <el-form-item label="应用名称">
            <el-input
                v-model="formInline.value1"
                style="width: 250px"
                placeholder="应用名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用类型">
            <el-select
                v-model="formInline.value2"
                style="width: 250px"
                placeholder="应有类型">
              <el-option label="全部" value="0"></el-option>
              <el-option label="桌面端" value="1"></el-option>
              <el-option label="WEB端" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker
                style="width: 250px"
                v-model="formInline.value3"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="inquire">查询</el-button>
            <el-button type="primary" @click="addAPP">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="20" style="background-color: #ffffff; padding: 10px">
        <div class="my-card">
          <div v-for="item of itemData2" class="my-card-div" @click="selectCard(item.id)">
            <el-card shadow="hover" :body-style="{ padding: '8px' }">
              <div class="my-card-img">
                <img :src="item.casePicture" width="100%" height="100%"/>
              </div>
              <div>
                <p class="my-card-title" :title="item.caseName">
                  {{ item.caseName }}
                </p>
                <p class="my-card-unit" :title="item.company">
                  单位名称:{{ item.company }}
                </p>
                <p class="my-card-time">
                  <span class="my-card-num">
                    <i class="fa fa-eye"></i>
                    {{ item.frequency }}
                  </span>
                  <span class="my-card-update">
                    发布时间： {{ item.releaseDate }}</span
                  >
                </p>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <my-footer></my-footer>
  </div>
</template>

<script>
import pickerShortcut from "@/mixins/picker-shortcut";
import {applist} from "@/api/application-center";
import MyFooter from "@/components/my-footer";

let id;
export default {
  name: "ApplicationCenter",
  mixins: [pickerShortcut],
  components: {
    MyFooter,
  },
  data() {
    return {
      formInline: {
        value1: "",
        value2: "0",
        value3: "",
      },
      caseName: "",
      caseType: "0",
      startDate: "",
      stopDate: "",
      itemData2: [],
      forname: "",

      asize: 0,//判断添加高
    };
  },
  mounted() {
    this.appList();
  },
  methods: {
    selectCard(key) {
      this.$router.push({
        name: "ApplicationDetailed",
        query: {
          id: key,
        },
      });
    },
    inquire() {
      this.caseName = this.formInline.value1;
      this.caseType = this.formInline.value2;
      if (this.formInline.value3 == "" || this.formInline.value3 == null) {
        this.startDate = "";
        this.stopDate = "";
      } else {
        this.startDate = this.formInline.value3[0];
        this.stopDate = this.formInline.value3[1];
      }
      this.appList();
    },
    reset() {
      this.formInline.value3 = "";
      this.caseName = this.formInline.value1 = "";
      this.caseType = this.formInline.value2 = "0";
      this.startDate = "";
      this.stopDate = "";
      this.appList();
    },
    addAPP() {
      this.$router.push({
        name: "Applicationsub",
        // query: {

        // },
      });
    },
    // 列表接口数据
    appList() {
      applist(this.caseName, this.caseType, this.startDate, this.stopDate).then(
          (res) => {
            this.itemData2 = res.data;
            this.asize = res.data.length;
            for (let i = 0; i < res.data.length; i++) {
              var img = res.data[i].casePicture.split(",");
              this.itemData2[i].casePicture = img[0];
            }
          }
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 258px);
  grid-gap: 10px;

  .my-card-div {
    width: 258px;
    margin: 5px;
    flex-grow: 0;

    .my-card-img {
      width: 100%;
      height: 140px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .my-card-title {
      margin: 5px 0 0 0;
      font-size: 15px;
      color: #1482f0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .my-card-unit {
      margin: 5px 0 0 0;
      font-size: 12px;
      color: #757575;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .my-card-time {
      display: flow-root;
      margin: 5px 0 0 0;
      padding-top: 5px;
      font-size: 12px;
      color: #757575;
      border-top: 1px solid #b6b6b6;

      .my-card-num {
        float: left;
      }

      .my-card-update {
        float: right;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }
}

.min-app {
  min-height: calc(100vh - 364px);
}
</style>
